<template>
    <view class="address-page">
        <!-- 表单内容 -->
        <form class="address-form">
            <!-- 收花人信息区域 -->
            <view class="section">
                <text class="section-title">收花人信息</text>

                <!-- 收花人姓名 -->
                <view class="form-item">
                    <input type="text" v-model="form.receiver" placeholder="收花人姓名" class="form-input"
                        :class="{ 'error': errors.receiver }" />
                </view>
                <text class="error-message" v-if="errors.receiver">{{ errors.receiver }}</text>

                <!-- 收花人手机号 -->
                <view class="form-item">
                    <input type="number" v-model="form.phone" placeholder="收花人手机号" class="form-input"
                        :class="{ 'error': errors.phone }" @blur="validatePhone" />
                </view>
                <text class="error-message" v-if="errors.phone">{{ errors.phone }}</text>
            </view>

            <!-- 收货地址信息区域 -->
            <view class="section">
                <text class="section-title">收货地址信息</text>

                <!-- 省市区输入（改为可直接填写） -->
                <view class="form-item">
                    <input type="text" v-model="form.regionText" placeholder="请填写省、市、区，如'江苏省 常州市 武进区'"
                        class="form-input" :class="{ 'error': errors.region }" />
                </view>
                <text class="error-message" v-if="errors.region">{{ errors.region }}</text>

                <!-- 详细地址 -->
                <view class="form-item">
                    <input type="text" v-model="form.detail" placeholder="详细地址，如'湖塘镇 鸣新中路22号'" class="form-input"
                        :class="{ 'error': errors.detail }" />
                </view>
                <text class="error-message" v-if="errors.detail">{{ errors.detail }}</text>

                <!-- <view class="form-checkbox">
                    <checkbox 
                        v-model="form.isDefault" 
                        class="checkbox"
                        @change="toggleDefault"
                    />
                    <text class="checkbox-text">设为默认地址</text>
                </view> -->
            </view>

            <!-- 保存按钮 -->
            <button class="save-btn" @click="saveAndNavigate">保存</button>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 表单数据
                form: {
                    id: null, // 地址ID，用于修改时标识
                    receiver: '', // 收花人姓名
                    phone: '', // 手机号
                    regionText: '', // 省市区文本（改为直接输入）
                    detail: '', // 详细地址
                    // isDefault: false // 是否设为默认地址
                },
                // 错误信息
                errors: {
                    receiver: '',
                    phone: '',
                    region: '',
                    detail: ''
                }
            };
        },
        onLoad(options) {
            // 如果是修改地址，从options获取地址ID并加载数据
            if (options.id) {
                this.loadAddressData(options.id);
            }
        },
        methods: {
            // 加载地址数据（用于修改）
            loadAddressData(id) {
                // 从本地存储获取所有地址
                const addresses = uni.getStorageSync('addressList') || [];
                const address = addresses.find(item => item.id === id);
                
                if (address) {
                    // 将原来的region数组转换为文本
                    this.form = {
                        ...address,
                        regionText: address.region.join(' ') // 转换为字符串
                    };
                }
            },
            
            // 返回上一页
            navigateBack() {
                uni.navigateBack({
                    delta: 1
                });
            },

            // 验证手机号
            validatePhone() {
                const phoneReg = /^1[3-9]\d{9}$/;
                if (!this.form.phone) {
                    this.errors.phone = '请输入手机号';
                } else if (!phoneReg.test(this.form.phone)) {
                    this.errors.phone = '请输入正确的手机号';
                } else {
                    this.errors.phone = '';
                }
            },

            // // 切换默认地址
            // toggleDefault() {
            //     this.form.isDefault = !this.form.isDefault;
            // },

            // 验证表单
            validateForm() {
              let isValid = true;
            
              // 验证收花人姓名
              if (!this.form.receiver) {
                this.errors.receiver = '请输入收花人姓名';
                isValid = false;
              } else {
                this.errors.receiver = '';
              }
            
              // 验证手机号
              this.validatePhone();
              if (this.errors.phone) {
                isValid = false;
              }
            
              // 验证地区输入（改为验证文本输入）
              if (!this.form.regionText) {
                this.errors.region = '请填写省市区';
                isValid = false;
              } else {
                this.errors.region = '';
              }
            
              // 验证详细地址
              if (!this.form.detail) {
                this.errors.detail = '请输入详细地址';
                isValid = false;
              } else {
                this.errors.detail = '';
              }
            
              return isValid;
            },

            // 保存地址并跳转到地址列表页
            saveAndNavigate() {
              if (!this.validateForm()) {
                return;
              }
            
              uni.showLoading({
                title: '保存中...'
              });
            
              let addressList = uni.getStorageSync('addressList') || [];
              
              // 处理省市区数据（将文本转换为数组存储，保持与原有格式兼容）
              const region = this.form.regionText.split(/\s+/).filter(item => item);
              
              // 构建要保存的地址对象
              const addressData = {
                ...this.form,
                region: region // 保存为数组格式，兼容原有逻辑
              };
              // 删除临时的regionText属性
              delete addressData.regionText;
              
              if (this.form.id) {
                const index = addressList.findIndex(item => item.id === this.form.id);
                if (index !== -1) {
                  addressList.splice(index, 1, addressData);
                }
              } else {
                addressData.id = Date.now().toString();
                addressList.push(addressData);
                
                if (addressData.isDefault) {
                  addressList.forEach(item => {
                    if (item.id !== addressData.id) {
                      item.isDefault = false;
                    }
                  });
                }
              }
            
              uni.setStorageSync('addressList', addressList);
            
              setTimeout(() => {
                uni.hideLoading();
                uni.showToast({
                  title: '地址保存成功',
                  icon: 'success',
                  duration: 1500
                });
            
                // 返回上一页
                setTimeout(() => {
                  uni.navigateBack();
                }, 1500);
              }, 1000);
            }
        }
    };
</script>

<style scoped>
    .address-page {
        min-height: 100vh;
        background-color: #f5f5f5;
    }

    /* 表单样式 */
    .address-form {
        padding: 30rpx;
    }

    .section {
        background-color: #ffffff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 30rpx;
    }

    .section-title {
        font-size: 31rpx;
        color: #333333;
        font-weight: 500;
        margin-bottom: 30rpx;
        display: block;
    }

    .form-item {
        position: relative;
        height: 90rpx;
        margin-bottom: 10rpx;
        border: 2rpx solid #eeeeee;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
    }

    .form-input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
        color: #333333;
    }

    .form-input::placeholder {
        color: #cccccc;
    }

    .error {
        border-color: #ff3b30 !important;
        color: #ff3b30;
    }

    .error-message {
        color: #ff3b30;
        font-size: 24rpx;
        margin-bottom: 20rpx;
        display: block;
        padding-left: 5rpx;
    }

    /* 复选框样式 */
    /* .form-checkbox {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        padding: 15rpx 0;
    }

    .checkbox {
        width: 36rpx;
        height: 36rpx;
    }

    .checkbox-text {
        font-size: 28rpx;
        color: #333333;
        margin-left: 15rpx;
    } */

    /* 保存按钮样式 */
    .save-btn {
        width: 100%;
        height: 98rpx;
        line-height: 98rpx;
        background-color: #d63027;
        color: #ffffff;
        font-size: 34rpx;
        font-weight: 500;
        border-radius: 16rpx;
        margin-top: 30rpx;
        border: none;
    }
</style>